<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2022-12-5-网易云新闻</title>
    <style>
        /**/
    
    
        a{/*统一去除下划线*/
            text-decoration: none;
        }

        /*设置新闻列表外部容器样式*/
        .news-wrapper{
            /*设置背景颜色*/
            background-color:#FFFFFF;
            /*内容区：设置宽度，设置高度？*/
            width:377px;
            height:450px;
            /*设置上边框？*/
            border-top:1px solid #DDDDDD;
            /*外边距：作用：布局盒子的位置：设置居中？*/
            margin:50px auto;
            padding: 10px 10px 10px 10px;
        }

        /*设置news-title*/
        .news-title{
            /*为了边框和文字宽度一致，需要将h2转换为行内块元素*/
            display:inline-block;
            /*设置高度*/
            height:30px;
            /*内边距*/
            padding-top: 10px;
            /*设置上边框*/
            border-top:1px red solid;
            /*通过外边距的margin-top将h2上移，盖住上边框*/
            margin-top:-11px; 
        }

        /*设置title中超链接的样式*/
        .news-title a{
            /*去除下划线*/
            text-decoration: none;
            color: #40406B;
            font-weight:bold;
            /*设置上外边距*/
            margin-top:10px; 
        }
        
        .news-img img{
            width:377px;
            height:186px;
        }

        /*设置图片的文字效果*/
        .news-img .img-title{
            /*向上移动文字*/
            margin-top:-40px;
            /*设置字体颜色*/
            color:#fff;
            /*设置加粗*/
            font-weight:bold;
            padding-left: 30px;
        }

        /*设置新闻列表*/
        .news-list{
            /*设置上外边距*/
            margin-top:20px;
            /*设置左侧的内边距*/
            /*padding-left:14px;*/
        }

        /*设置li*/
        .news-list li{
            /*设置下外边距*/
            margin-bottom: 17px;
        }

        /*设置li中的文字*/
        .news-list li a{
            /*设置字体大小*/
            font-size:14px;
            /*设置字体颜色*/
            color:#666;  
        }

        /*设置超链接鼠标移入样式*/
        .news-list li a:hover{
            color:red;
        }



        
        
    </style>
</head>
<body>
    <!--1、创建新闻列表的外侧容器-->
    <div class="news-wrapper">
    <!--2、创建一个标题标签-->
        <h2 class="news-title">
            <a href ="#">体育</a>
        </h2>
        <!--3、创建一个图片的容器-->
        <div class="news-img">
            <a href="#">
                    <img src="../picture/04/04.jpg" alt="">
                    <!--4、创建图片标题-->
                    <h3 class="img-title">
                        哥俩太亲了!姆巴佩和吉鲁深情对视
                    </h3>
            </a>
        </div>
        <!--5、新闻列表-->
        <div class="news-list">
            <li>
                <a href="#">梅西里程碑之夜，踢场子的是劳塔罗</a>
            </li>
            <li>
                <a href="#">阿根廷蜘蛛侠！世界杯上和梅西激情庆祝</a>
            </li>
            <li>
                <a href="#">美国人为啥非得管足球叫soccer?</a>
            </li>
            <li>
                <a href="#">世界杯最火爆一战 这两国到底多大仇？</a>
            </li>

        </div>
    </div>

    
</body>
</html>